<template>
  <div>
    <el-dialog title="颜色选择" :visible.sync="log" width="1000px">
      <div class="flex" style="margin-bottom: 20px;" v-if="!xiaochengxua">
          <el-radio v-model="yuanjiao" :label="1">圆角</el-radio>
          <el-radio v-model="yuanjiao" :label="2">直角</el-radio>
      </div>
      <div class="flex">
          <div>
            <div><img src="../../../static/img/黄色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(1,'黄色')"><i class="el-icon-check" v-if="yansename == '黄色'"></i>黄色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/初音绿.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(2,'初音绿')"><i class="el-icon-check" v-if="yansename == '初音绿'"></i>初音绿</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/蓝色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(3,'蓝色')"><i class="el-icon-check" v-if="yansename == '蓝色'"></i>蓝色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/绿色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(4,'绿色')"><i class="el-icon-check" v-if="yansename == '绿色'"></i>绿色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/粉红色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(5,'粉红色')"><i class="el-icon-check" v-if="yansename == '粉红色'"></i>粉红色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/红色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(6,'红色')"><i class="el-icon-check" v-if="yansename == '红色'"></i>红色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/浅蓝色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(7,'浅蓝色')"><i class="el-icon-check" v-if="yansename == '浅蓝色'"></i>浅蓝色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/紫色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(8,'紫色')"><i class="el-icon-check" v-if="yansename == '紫色'"></i>紫色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/白色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(9,'白色')"><i class="el-icon-check" v-if="yansename == '白色'"></i>白色</div>
            </div>
          </div>
          <div>
            <div><img src="../../../static/img/黑色.png" style="width: 200px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div class="yanse" @click="xuanzhong(10,'黑色')"><i class="el-icon-check" v-if="yansename == '黑色'"></i>黑色</div>
            </div>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="danger" @click="fasong">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import axios from "axios";
  export default {
    name: 'yansexuanze',
    props:['yuanjiaoa','yansename','xiaochengxu'],
    data() {
      return {
        log:false,
        yanse:0,
        yuanjiao:"",
        xiaochengxua:false
      }
    },
    created() {
      if(this.xiaochengxu == true){
        this.xiaochengxua = true
      }
      if(this.yuanjiaoa){
        this.yuanjiao  = this.yuanjiaoa
      }
      console.log(this.yuanjiao)
      if(this.yansename  == '黄色'){
        this.yanse = 1
      }
      if(this.yansename  == '初音绿'){
        this.yanse = 2
      }
      if(this.yansename  == '蓝色'){
        this.yanse = 3
      }
      if(this.yansename  == '绿色'){
        this.yanse = 4
      }
      if(this.yansename  == '粉红色'){
        this.yanse = 5
      }
      if(this.yansename  == '红色'){
        this.yanse = 6
      }
      if(this.yansename  == '浅蓝色'){
        this.yanse = 7
      }
      if(this.yansename  == '紫色'){
        this.yanse = 8
      }
      if(this.yansename  == '白色'){
        this.yanse = 9
      }
      if(this.yansename  == '黑色'){
        this.yanse = 10
      }
    },
    methods:{
      fasong:function(){
        let obj = {
          yanse:this.yanse,
          yuanjiao:this.yuanjiao
        }
        this.$emit('yansexuanze',obj)
        this.log = false
      },
      xuanzhong:function(yanse,yansename){
        this.yansename = yansename
        this.yanse = yanse
      }
    }
  }
</script>

<style lang="less" scoped>
  .flexcc{ display: flex; justify-content: center; align-items: center;}
  .yanse{background: rgb(241, 241, 241);border: 1px solid rgb(229, 229, 229);border-radius:27px; cursor: pointer; padding: 10px 30px; border-radius: 20px; cursor: pointer;}
</style>
